<template>
  <div style="height: 100%">
    <g-dynamic-table
      type="useronline"
      ref="table"
      :fetch="fetchDataList"
      :showActionBtn="showActionBtn"
      @action-click="handleActionClick"
    >
      <template #headerCell="{ column }">
        <template v-if="column.field == 'No'"> {{ column.title }}{{ column }} </template>
      </template>
      <template #bodyCell="{ column, record }">
        <template v-if="column.key === 'roles'">
          <template v-if="record[column.field].length > 0">
            <a-tooltip :title="rolesEllipsis(record.roles)">
              <span>{{ rolesEllipsis(record.roles) }} </span>
            </a-tooltip>
          </template>
          <span v-else></span>
        </template>

        <!-- 邮箱是否已验证 -->
        <template v-if="column.key === 'isEmailConfirmed'">
          <a class="isEmailConfirmed">
            <CheckCircleTwoTone v-if="record.isEmailConfirmed" twoToneColor="#50CD89" />
            <CloseCircleTwoTone v-if="!record.isEmailConfirmed" twoToneColor="#F2416C" />
          </a>
        </template>

        <!-- 是否已激活 -->
        <template v-if="column.key === 'isActive'">
          <a class="isActive">
            <CheckCircleTwoTone v-if="record.isActive" twoToneColor="#50CD89" />
            <CloseCircleTwoTone v-if="!record.isActive" twoToneColor="#F2416C" />
          </a>
        </template>
      </template>
    </g-dynamic-table>
  </div>
</template>

<script lang="ts">
  import { defineComponent } from 'vue';
  import AppCompoentBase from '/@/shared/component-base/app-component-base';
  import GDynamicTable from '/@/shared/components/g-dynamic-table/index.vue';
  import {
    UserListDto,
    OnlineUserServiceProxy,
    GetOnlineUserInput,
  } from '/@/shared/service-proxies/service-proxies';
  import { CheckCircleTwoTone } from '@ant-design/icons-vue';
  import { EVENT_BTN_ENUM } from '/@/shared/components/g-dynamic-table/enums/event-btn-enum';
  import { AppConsts } from '/@/abpPro/AppConsts';

  export default defineComponent({
    name: 'user-online-news',
    components: {
      GDynamicTable,
      CheckCircleTwoTone,
    },
    mixins: [AppCompoentBase],
    data() {
      return {
        /** 用户api */
        user: new OnlineUserServiceProxy(this.$apiUrl, this.$api),
      };
    },
    computed: {
      rolesEllipsis() {
        return (roles) => {
          return roles
            .map((item) => {
              return item.roleName;
            })
            .join(', ');
        };
      },
      showActionBtn() {
        /**
         * item 按钮json配置项
         * column table 当前列配置
         * record 当前行数据
         */
        return (item, column, record) => {
          switch (item.name) {
            case EVENT_BTN_ENUM.DOWNLINE:
              return !this.isAdmin(record) && !this.isSuperAdmin(record);
            default:
              return true;
          }
        };
      },
    },
    methods: {
      /** 是否是管理员 */
      isAdmin(item: UserListDto) {
        return (
          item.userName === AppConsts.userManagement.defaultAdminUserName ||
          item.userName === AppConsts.superUserManagement.defaultAdminUserName
        );
      },
      /** 是否为系统默认不可删除的SuperAdmin用户 */
      isSuperAdmin(item: UserListDto): boolean {
        return item.userName === AppConsts.superUserManagement.defaultAdminUserName;
      },
      /**
       * 获取数据
       */
      fetchDataList() {
        const { maxResultCount, skipCount, sorting, FilterText } = (
          this.$refs.table as any
        ).getSearchProps();
        const getOnlineUserInput = new GetOnlineUserInput();
        getOnlineUserInput.startTime = undefined;
        getOnlineUserInput.endTime = undefined;
        getOnlineUserInput.filterText = FilterText;
        getOnlineUserInput.skipCount = skipCount;
        getOnlineUserInput.sorting = sorting;
        getOnlineUserInput.maxResultCount = maxResultCount;
        return new Promise((resolve, reject) => {
          this.user
            .getOnlineUserPaged(getOnlineUserInput)
            .finally(() => {
              // finishedCallback!();
            })
            .then((res) => {
              resolve(res);
              // this.showPaging(res);
            })
            .catch((error) => {
              reject(error);
            });
        });
      },
      /** 下线 */
      downline(item: UserListDto) {
        const downItem = [] as number[];
        downItem.push(item.id);
        this.user.downline(downItem).then(() => {
          setTimeout(() => {
            this.notify.success(this.l('Success'));
            (this.$refs.table as any).reloadGoFirstPage();
          }, 5000);
        });
      },
      /**
       * 按钮回调事件
       */
      handleActionClick(event: string, item?: any) {
        console.log(event);
        switch (event) {
          case EVENT_BTN_ENUM.DOWNLINE:
            this.downline(item);
            break;
          default:
            break;
        }
      },
    },
  });
</script>

<style scoped lang="less"></style>
